<template>
  <el-row
    type="flex"
    justify="space-between"
    align="middle"
    style="height: 40px; width: 100%;"
  >
    <el-col :span="20">
      <span>{{ nodeData.name }}</span>
    </el-col>
    <el-col :span="4">
      <el-row type="flex" justify="end">
        <!-- 两个内容 -->
        <el-col>{{ nodeData.manager }}</el-col>
        <el-col>
          <!-- 下拉菜单 element -->
          <!--
              下拉菜单 指令事件
               1. el-dropdown 绑定事件 @command
               2. el-dropdown-item 要加command属性
               3. methods里定义方法，方法里接受参数
            -->
          <el-dropdown @command="handleCommand">
            <span> 操作<i class="el-icon-arrow-down" /> </span>
            <!-- 下拉菜单 -->
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item command="add">添加子部门</el-dropdown-item>
              <el-dropdown-item v-if="!isRoot" command="edit">编辑部分</el-dropdown-item>
              <!--
                使用@click必须加修饰符，因为el-dropdown-item没有click事件
                那为什么我el-button为什么可以
                因为他实现了子传父
                我们这里会参考下拉菜单文档，然后采用指令事件的方式
               -->
              <!-- <el-dropdown-item v-if="!isRoot" @click.native="del">删除部门</el-dropdown-item> -->
              <el-dropdown-item v-if="!isRoot" command="del">删除部门</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </el-col>
      </el-row>
    </el-col>
  </el-row>
</template>

<script>
import { reqDelDepartments } from '@/api/departments'
export default {
  // inject: ['dd'],
  props: {
    // 定义传入的属性
    // 指的是当前节点数据
    nodeData: {
      type: Object,
      required: true
    },
    isRoot: {
      type: Boolean,
      // 因为头部只有一个即根只有一个，其余的都是不是树根
      default: false
    }
  },
  methods: {
    handleCommand(command) {
      switch (command) {
        case 'add':
          console.log(this.dd)
          // console.log('添加逻辑')
          this.$emit('add-depts', this.nodeData)
          break
        case 'edit':
          // console.log('编辑逻辑')
          this.$emit('edit-depts', this.nodeData)
          break
        case 'del':
          // console.log('删除逻辑')
          /**
           * 1. 确认框提示
           * 2. 确认了 调用请求
           * 3. 删除成功了 提示信息
           * 4. 重新渲染数据 - 刷新列表 如何通知父组件 子传父
           */
          this.$confirm(`亲，是否要删除部门${this.nodeData.name}`, '温馨提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(async() => {
            console.log('点击了确认')
            await reqDelDepartments(this.nodeData.id)
            this.$message.success('删除成功')
            this.$emit('del-depts')
          }).catch(() => {
            console.log('取消')
          })
          break
      }
    }
  }
}
</script>
